<template>
  <ContentField>
    <div class="col-12">
      <h2 class="animate__animated animate__bounceInDown" style="color: rgb(13, 202, 240)">
        GAME RULES
      </h2>
    </div>
    <div class="col-12 game-content">
      <ul class="centered-list">
        <li>
          <p class="typewriter">&#x1F44D; {{ printedText1 }}</p>
        </li>
        <li>
          <p class="typewriter">&#x1F603; {{ printedText2 }}</p>
        </li>
        <li>
          <p class="typewriter">&#x1F618; {{ printedText3 }}</p>
        </li>
        <li>
          <p class="typewriter">&#x1F680; {{ printedText4 }}</p>
        </li>
        <li>
          <p class="typewriter">&#x1F525; {{ printedText5 }}</p>
        </li>
      </ul>
    </div>
  </ContentField>
</template>

<script>
import { ref, onMounted } from "vue";
import ContentField from "@/components/ContentField.vue";

export default {
  components: {
    ContentField,
  },
  setup() {
    const printedText1 = ref("");
    const text1 = "使用wasd进行上下移动（请注意自己是蓝色方还是红色方）";

    const typewriterEffect1 = () => {
      let index = 0;
      const timer = setInterval(() => {
        printedText1.value += text1[index];
        index++;
        if (index === text1.length) {
          clearInterval(timer);
        }
      }, 100); // 每个字之间的延迟时间，可以根据需要进行调整
    };

    const printedText2 = ref("");
    const text2 = "对局记录可以在对局列表中进行录像回放";

    const typewriterEffect2 = () => {
      let index = 0;
      const timer = setInterval(() => {
        printedText2.value += text2[index];
        index++;
        if (index === text2.length) {
          clearInterval(timer);
        }
      }, 100); // 每个字之间的延迟时间，可以根据需要进行调整
    };

    const printedText3 = ref("");
    const text3 = "账号中会自带一个笨笨的机器人供你使用";

    const typewriterEffect3 = () => {
      let index = 0;
      const timer = setInterval(() => {
        printedText3.value += text3[index];
        index++;
        if (index === text3.length) {
          clearInterval(timer);
        }
      }, 100); // 每个字之间的延迟时间，可以根据需要进行调整
    };

    const printedText4 = ref("");
    const text4 = "觉得不错，分享给其他人，一起匹配，一起快乐";

    const typewriterEffect4 = () => {
      let index = 0;
      const timer = setInterval(() => {
        printedText4.value += text4[index];
        index++;
        if (index === text4.length) {
          clearInterval(timer);
        }
      }, 100); // 每个字之间的延迟时间，可以根据需要进行调整
    };

    const printedText5 = ref("");
    const text5 = "如有问题，请向该邮箱及时反馈:2507260744@qq.com";

    const typewriterEffect5 = () => {
      let index = 0;
      const timer = setInterval(() => {
        printedText5.value += text5[index];
        index++;
        if (index === text5.length) {
          clearInterval(timer);
        }
      }, 100); // 每个字之间的延迟时间，可以根据需要进行调整
    };

    onMounted(() => {
      typewriterEffect1();
      typewriterEffect2();
      typewriterEffect3();
      typewriterEffect4();
      typewriterEffect5();
    });

    return {
      printedText1,
      printedText2,
      printedText3,
      printedText4,
      printedText5,
      typewriterEffect1,
      typewriterEffect2,
      typewriterEffect3,
      typewriterEffect4,
      typewriterEffect5,
    };
  },
};
</script>

<style scoped>
.game-content {
  display: flex;
  align-items: center; /* 子项水平居中 */
  justify-content: center;
  height: 80%;
}
div h2 {
  text-align: center;
  color: white;
  margin-top: 2%;
}

div h2:hover {
  color: rgb(13, 202, 240);
}

.typewriter {
  font-size: 17px; /* 调整字体大小 */
  color: white;
}

.typewriter:hover {
  color: rgb(13, 202, 240);
}

ul.centered-list {
  display: flex;
  flex-direction: column; /* 设置为垂直方向的列布局 */
  /* list-style-type: "\1F44D"; 列表样式 */
  padding: 0;
}

ul.centered-list li {
  margin: 10px;
}
</style>
